<template>
	<div class="search">
		<div class="noscroll">
			<div class="mui-row">
				<template v-if="isback">
					<div class="mui-col-xs-1 ">
						<span class="mui-icon mui-icon-arrowleft" @click="backed()"></span>
					</div>
					<div class="mui-col-xs-11 ">
						<div class="mui-input-row mui-search">

							<input type="search" class="mui-input-clear" placeholder="搜索歌手歌曲或专辑" @click="keyups()" @keyup="suggest(searchInfo)" v-model="searchInfo" />

						</div>
					</div>
				</template>
				<template v-else>
					<div class="mui-col-xs-12 ">
						<div class="mui-input-row mui-search">

							<input type="search" class="mui-input-clear" placeholder="搜索歌手歌曲或专辑" @focus="keyups()" @keyup="suggest(searchInfo)" v-model="searchInfo" />

						</div>
					</div>
				</template>
			</div>
		</div>
	
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'

	export default {

		data() {
			return {

				issearch: false,
				searchInfo: '',

			}
		},
		computed: {
			...mapGetters([
				'searchlist',
				'isback'
			])
		},
		watch: {
			$route(to) { //监听路由变动
				var path = to.path.substring(1);
				if(this.$route.path.substring(1) == 'home') {
					this.$store.dispatch('isbackfalse')
				}else{
					this.$store.dispatch('isback')
				}
			}

		},
		methods: {
			backed() {

				if(this.$route.path.substring(1) != 'home') {
					this.$router.back()
				}

			},
			keyups() {
				this.$router.push({
					path: '/suggestlist',
				})
		

			},
			suggest(searchInfo) {
				var _this = this;
				if(event.keyCode != "13") {
					
					this.$http.get('/search/suggest' + "?keywords=" + searchInfo).then((res) => {
						//_this.searchlist = res.data.result.albums;
						var datas = res.data.result
						_this.$store.dispatch('suggest', datas)
						console.log(this.searchlist)
					})
				} else {
					
					this.$router.push({
						path: '/searchlist',
					})
					this.$http.get('/search' + "?keywords=" + searchInfo).then((res) => {
						//_this.searchlist = res.data.result.albums;
						var datas = res.data.result
						_this.$store.dispatch('searchlist', datas)
					})
				}
			},
		},
		
	}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	.noscroll {
		position: fixed;
		z-index: 997;
		top: 0;
		width: 100%;
		padding: 5px;
		.mui-col-xs-1 {
			.mui-icon-arrowleft {
				line-height: 1.5em;
				color: #fff;
			}
		}
		.mui-search {
			&:before {
				color: #fff
			}
			.mui-icon-search {
				color: #fff
			}
			input {
				background: rgba(255, 255, 255, 0.3);
				border: #B27C8B 1px solid;
			}
			.mui-icon-clear {
				color: #ccc!important
			}
		}
	}
	
	
</style>